<template>
  <div>
    <!--    <el-button type="primary" @click="delrouterall()">click</el-button>-->


    <div style="margin: 10px 0">

      <el-button size="small" type="primary" style="margin: 0 10px" @click="showNewForm">新增 <i
          class="el-icon-circle-plus"></i></el-button>
      <!--      <el-button type="primary" style="margin: 0 10px" @click="handleDelBatch">批量导入<i-->
      <!--          class="el-icon-upload"></i></el-button>-->
      <el-upload
          :show-file-list="false"
          style="display: inline-block"
          class="upload-demo"
          action="xx"
          :http-request="uploadFile"
          ref="upload"
      >
        <el-button size="small" type="primary" style="margin: 10px 10px">批量导入 <i
            class="el-icon-upload"></i></el-button>
      </el-upload>
      <el-popconfirm
          confirm-button-text='确定'
          cancel-button-text='取消'
          icon="el-icon-info"
          icon-color="red"
          title="确定删除吗？"
          @confirm="handleDelBatch"
      >
        <el-button size="small" type="danger" slot="reference" style="margin: 10px 10px">
          批量删除
          <i class="el-icon-remove-outline"></i>
        </el-button>
      </el-popconfirm>
      <el-button size="small" type="success" style="margin-left: 100px; margin-right: 10px" @click="startcj">启动采集任务 <i
          class="el-icon-thumb"></i></el-button>
      <el-button size="small" type="danger" style="margin: 0 10px" @click="stopcj">停止采集任务 <i
          class="el-icon-thumb"></i></el-button>


      <div style="float: right">
        <el-cascader
            style="margin-left: 10px; width: 255px"
            placeholder="请选择单位"
            ref="dwref"
            v-model="dwid"
            @change=""
            :options="dwoptions"
            :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'dwname', value:'id', emitPath: false }"
            clearable>
        </el-cascader>
        <el-input style="width: 200px; margin: 0 10px 0 10px" placeholder="请输入井号" suffix-icon="el-icon-search"
                  v-model="jh"/>

        <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
      </div>
      <!--        <el-button type="primary" style="margin: 0 10px" @click="batchImport">批量导入<i-->
      <!--            class="el-icon-upload"></i></el-button>-->
      <!--      </el-upload>-->

      <!--      <el-upload-->
      <!--          style="display: inline-block"-->
      <!--          class="upload-demo"-->
      <!--          action="http://localhost:9090/file/upload"-->
      <!--          accept='.xls,.xlsx'-->
      <!--          ref="upload"-->
      <!--      >-->
      <!--        <el-button type="primary" style="margin: 0 10px" @click="batchImport">批量导入<i-->
      <!--            class="el-icon-upload"></i></el-button>-->
      <!--      </el-upload>-->

      <!--      <el-popconfirm-->
      <!--          style="margin: 0 10px"-->
      <!--          confirm-button-text='确定'-->
      <!--          cancel-button-text='取消'-->
      <!--          icon="el-icon-info"-->
      <!--          icon-color="red"-->
      <!--          title="确定删除吗？"-->
      <!--          @confirm="handleDelBatch">-->
      <!--        <el-button type="danger" slot="reference" style="margin-left: 370px">批量删除<i-->
      <!--            class="el-icon-remove-outline"></i></el-button>-->
      <!--      </el-popconfirm>-->

    </div>


    <el-dialog title="新增" :visible.sync="dialogFormVisible" width="1200px">
      <el-form :inline="true" :model="form" :rules="formRules" ref="saveform" :inline-message="true" :show-message="false">  <!--ules="formRules"-->
        <el-form-item label="井号" label-width="80px" prop="jh">
          <el-input v-model="form.jh" autocomplete="off" style="width: 150px" clearable></el-input>
        </el-form-item>
        <el-form-item label="单位" label-width="80px" prop="dw">
          <el-cascader
              placeholder="请选择单位"
              ref="dwref"
              v-model="form.dw"
              @change="dwchange"
              :options="dwoptions"
              :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'dwname', value:'id' }"
              clearable></el-cascader>
        </el-form-item>
        <el-form-item label="干线" label-width="80px" prop="gx">
          <el-select v-model="form.gx" clearable filterable placeholder="干线" clearable>
            <el-option
                v-for="item in gxArr"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IP" label-width="80px" prop="ip">
          <el-input v-model="form.ip" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-divider content-position="left">抽油机启停控制</el-divider>
        <el-form-item label="启机线圈地址" label-width="150px" prop="cyjqdloc">
          <el-input v-model="form.cyjqdloc" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="启动标识" label-width="100px" prop="cyjqdflag" :inline-message="true" style="margin-bottom: 0;">
          <el-select v-model="form.cyjqdflag" placeholder="0/1" style="width: 100px" clearable>
            <el-option label="0" :value="0"></el-option>
            <el-option label="1" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="停机线圈地址" label-width="150px" prop="cyjtjloc">
          <el-input v-model="form.cyjtjloc" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="停机标识" label-width="100px" prop="cyjtjflag" :inline-message="true" style="margin-bottom: 0;">
          <el-select v-model="form.cyjtjflag" placeholder="0/1" style="width: 100px" clearable>
            <el-option label="0" :value="0"></el-option>
            <el-option label="1" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-divider content-position="left">实时数据</el-divider>
        <table style="text-align: left; margin-left: 20px; border: 0px solid black;">
          <tr>
            <th style="width: 50px; border: 0px solid black;">
              参数
            </th>
            <th>
              寄存器类型
            </th>
            <th>
              寄存器地址
            </th>
            <th>
              数据类型
            </th>
            <th>
              量程及变换
            </th>
          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              回压
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hyregtype" :inline-message="true" style="margin-bottom: 0;">
                <el-select v-model="form.hyregtype" placeholder="请选择寄存器类型" @change="" clearable >
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hyloc" style="margin-bottom: 0;"  >
                <el-input v-model="form.hyloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hydatatype" style="margin-bottom: 0;">
                <el-select v-model="form.hydatatype" placeholder="请选择数据类型" clearable>
                  <el-option
                      v-for="item in form.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hybh" style="margin-bottom: 0;">
                <el-select v-model="form.hybh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in form.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              套压
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tyregtype" :inline-message="true" style="margin-bottom: 0;">
                <el-select v-model="form.tyregtype" placeholder="请选择寄存器类型" @change="" clearable>
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tyloc" style="margin-bottom: 0;">
                <el-input v-model="form.tyloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tydatatype" style="margin-bottom: 0;">
                <el-select v-model="form.tydatatype" autocomplete="off" clearable>
                  <el-option
                      v-for="item in form.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tybh" style="margin-bottom: 0;">
                <el-select v-model="form.tybh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in form.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>

          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              温度
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="wdregtype" :inline-message="true" style="margin-bottom: 0;">
                <el-select v-model="form.wdregtype" placeholder="请选择寄存器类型" @change="" clearable>
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="wdloc" style="margin-bottom: 0;">
                <el-input v-model="form.wdloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="wddatatype" style="margin-bottom: 0;">
                <el-select v-model="form.wddatatype" autocomplete="off" clearable>
                  <el-option
                      v-for="item in form.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tybh" style="margin-bottom: 0;">
                <el-select v-model="form.wdbh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in form.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>

          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              含水率
            </td>
            <td style="border: 0px solid black;">
              <el-form-item  label="" label-width="100px" prop="hsregtype" :inline-message="true" style="margin-bottom: 0;" >
                <el-select  v-model="form.hsregtype" autocomplete="off" clearable>
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hsloc" style="margin-bottom: 0;">
                <el-input v-model="form.hsloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hsdatatype" style="margin-bottom: 0;">
                <el-select v-model="form.hsdatatype" autocomplete="off" clearable>
                  <el-option
                      v-for="item in form.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hsbh" style="margin-bottom: 0;">
                <el-select v-model="form.hsbh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in form.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>


          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              加药罐
            </td>
            <td style="border: 0px solid black;">
              <el-form-item  label="" label-width="100px" prop="jygywregtype" :inline-message="true" style="margin-bottom: 0;" >
                <el-select  v-model="form.jygywregtype" autocomplete="off" clearable>
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="jygywloc" style="margin-bottom: 0;">
                <el-input v-model="form.jygywloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="jygywdatatype" style="margin-bottom: 0;">
                <el-select v-model="form.jygywdatatype" autocomplete="off" clearable>
                  <el-option
                      v-for="item in form.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="jygywbh" style="margin-bottom: 0;">
                <el-select v-model="form.jygywbh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in form.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
        </table>
<!--        <el-divider content-position="left">回压</el-divider>-->
<!--        <el-form-item label="寄存器类型" label-width="100px" prop="ip" >-->
<!--          <el-input v-model="form.ip" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="寄存器地址" label-width="100px" prop="ip">-->
<!--          <el-input v-model="form.ip" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="数据类型" label-width="100px" prop="ip">-->
<!--          <el-input v-model="form.ip" autocomplete="off"></el-input>-->
<!--        </el-form-item>-->


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="editFormVisible" width="1200px">
      <el-form :inline="true" :model="editform" :rules="formRules" ref="editform" :inline-message="true" :show-message="false">  <!--ules="formRules"-->
        <el-form-item label="井号" label-width="80px" prop="jh">
          <el-input v-model="editform.jh" style="width: 150px" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="单位" label-width="80px" prop="dw">
          <el-cascader
              placeholder="请选择单位"
              ref="dwref"
              v-model="editform.dw"
              @change="dwchange"
              :options="dwoptions"
              :props="{ expandTrigger: 'hover', checkStrictly: true, label: 'dwname', value:'id' }"
              clearable></el-cascader>
        </el-form-item>
        <el-form-item label="干线" label-width="80px" prop="gx">
          <el-select v-model="editform.gx" clearable filterable placeholder="干线" clearable>
            <el-option
                v-for="item in gxArr"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="IP" label-width="80px" prop="ip">
          <el-input v-model="editform.ip" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-divider content-position="left">抽油机启停控制</el-divider>
        <el-form-item label="启机线圈地址" label-width="150px" prop="cyjqdloc">
          <el-input v-model="editform.cyjqdloc" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="启动标识" label-width="100px" prop="cyjqdflag" :inline-message="true" style="margin-bottom: 0;">
          <el-select v-model="editform.cyjqdflag" placeholder="0/1" style="width: 100px" clearable>
            <el-option label="0" :value="0"></el-option>
            <el-option label="1" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="停机线圈地址" label-width="150px" prop="cyjtjloc">
          <el-input v-model="editform.cyjtjloc" autocomplete="off" clearable></el-input>
        </el-form-item>
        <el-form-item label="停机标识" label-width="100px" prop="cyjtjflag" :inline-message="true" style="margin-bottom: 0;">
          <el-select v-model="editform.cyjtjflag" placeholder="0/1" style="width: 100px" clearable>
            <el-option label="0" :value="0"></el-option>
            <el-option label="1" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-divider content-position="left">实时数据</el-divider>
        <table style="text-align: left; margin-left: 20px; border: 0px solid black;">
          <tr>
            <th style="width: 50px; border: 0px solid black;">
              参数
            </th>
            <th>
              寄存器类型
            </th>
            <th>
              寄存器地址
            </th>
            <th>
              数据类型
            </th>
            <th>
              量程及变换
            </th>
          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              回压
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hyregtype" :inline-message="true" style="margin-bottom: 0;">
                <el-select v-model="editform.hyregtype" placeholder="请选择寄存器类型" @change="" clearable>
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hyloc" style="margin-bottom: 0;">
                <el-input v-model="editform.hyloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hydatatype" style="margin-bottom: 0;">
                <el-select v-model="editform.hydatatype" placeholder="请选择数据类型" clearable>
                  <el-option
                      v-for="item in editform.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hybh" style="margin-bottom: 0;">
                <el-select v-model="editform.hybh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in editform.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              套压
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tyregtype" :inline-message="true" style="margin-bottom: 0;">
                <el-select v-model="editform.tyregtype" placeholder="请选择寄存器类型" @change="" clearable>
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tyloc" style="margin-bottom: 0;">
                <el-input v-model="editform.tyloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tydatatype" style="margin-bottom: 0;">
                <el-select v-model="editform.tydatatype" autocomplete="off" clearable>
                  <el-option
                      v-for="item in editform.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tybh" style="margin-bottom: 0;">
                <el-select v-model="editform.tybh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in editform.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>

          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              温度
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="wdregtype" :inline-message="true" style="margin-bottom: 0;">
                <el-select v-model="editform.wdregtype" placeholder="请选择寄存器类型" @change="" clearable>
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="wdloc" style="margin-bottom: 0;">
                <el-input v-model="editform.wdloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="wddatatype" style="margin-bottom: 0;">
                <el-select v-model="editform.wddatatype" autocomplete="off" clearable>
                  <el-option
                      v-for="item in editform.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="tybh" style="margin-bottom: 0;">
                <el-select v-model="editform.wdbh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in editform.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>

          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              含水率
            </td>
            <td style="border: 0px solid black;">
              <el-form-item  label="" label-width="100px" prop="hsregtype" :inline-message="true" style="margin-bottom: 0;" >
                <el-select  v-model="editform.hsregtype" autocomplete="off" clearable>
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hsloc" style="margin-bottom: 0;">
                <el-input v-model="editform.hsloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hsdatatype" style="margin-bottom: 0;">
                <el-select v-model="editform.hsdatatype" autocomplete="off" clearable>
                  <el-option
                      v-for="item in editform.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="hsbh" style="margin-bottom: 0;">
                <el-select v-model="editform.hsbh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in editform.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>


          </tr>
          <tr style=" border: 0px solid black; ">
            <td style="border: 0px solid black;">
              加药罐
            </td>
            <td style="border: 0px solid black;">
              <el-form-item  label="" label-width="100px" prop="jygywregtype" :inline-message="true" style="margin-bottom: 0;" >
                <el-select  v-model="editform.jygywregtype" autocomplete="off" clearable>
                  <el-option label="输入寄存器" :value="3"></el-option>
                  <el-option label="保持寄存器" :value="4"></el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="jygywloc" style="margin-bottom: 0;">
                <el-input v-model="editform.jygywloc" autocomplete="off" clearable></el-input>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="jygywdatatype" style="margin-bottom: 0;">
                <el-select v-model="editform.jygywdatatype" autocomplete="off" clearable>
                  <el-option
                      v-for="item in editform.mathdatatypes"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
            <td style="border: 0px solid black;">
              <el-form-item label="" label-width="100px" prop="jygywbh" style="margin-bottom: 0;">
                <el-select v-model="editform.jygywbh" autocomplete="off" clearable>
                  <el-option
                      v-for="item in editform.bhs"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </td>
          </tr>
        </table>
        <!--        <el-divider content-position="left">回压</el-divider>-->
        <!--        <el-form-item label="寄存器类型" label-width="100px" prop="ip" >-->
        <!--          <el-input v-model="form.ip" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="寄存器地址" label-width="100px" prop="ip">-->
        <!--          <el-input v-model="form.ip" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="数据类型" label-width="100px" prop="ip">-->
        <!--          <el-input v-model="form.ip" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->


      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>


    <el-table ref="table" @selection-change="handleSelectionChange" :data="tableData"
              style="margin: 10px; width: 1600px" border stripe>
      <el-table-column width="50" type="selection">
      </el-table-column>
      <el-table-column type="index" label="序号" width="60">
      </el-table-column>
      <el-table-column prop="id" label="ID" width="60" v-if="false">
      </el-table-column>
      <el-table-column prop="jh" label="井号" width="100">
      </el-table-column>
      <el-table-column prop="ip" label="IP" width="150">
      </el-table-column>
      <el-table-column prop="dwObj.dwname" label="单位" width="150">
      </el-table-column>
      <el-table-column prop="gxObj.name" label="干线" width="150">
      </el-table-column>
<!--      {id: 2, name: '16位无符号整数'},-->
<!--      {id: 3, name: '16位整数'},-->
<!--      {id: 4, name: '32位无符号整数'},-->
<!--      {id: 5, name: '32位整数'},-->
<!--      {id: 8, name: '32位float'}-->
      <el-table-column prop="" label="回压" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.hyregtype == 3">3x</span> <span v-else-if="scope.row.hyregtype == 4">4x</span>{{scope.row.hyloc}}
          <span v-if="scope.row.hydatatype == 2">U2</span><span v-else-if="scope.row.hydatatype == 3">I2</span>
          <span v-else-if="scope.row.hydatatype == 4">U4</span><span v-else-if="scope.row.hydatatype == 5">I4</span>
          <span v-else-if="scope.row.hydatatype == 8">F4</span>-><span v-if="scope.row.hybh == 1">0.01d</span>
          <span v-else-if="scope.row.hybh == 2"></span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="套压" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.tyregtype == 3">3x</span> <span v-else-if="scope.row.tyregtype == 4">4x</span>{{scope.row.tyloc}}
          <span v-if="scope.row.tydatatype == 2">U2</span><span v-else-if="scope.row.tydatatype == 3">I2</span>
          <span v-else-if="scope.row.tydatatype == 4">U4</span><span v-else-if="scope.row.tydatatype == 5">I4</span>
          <span v-else-if="scope.row.tydatatype == 8">F4</span>-><span v-if="scope.row.tybh == 1">0.01d</span>
          <span v-else-if="scope.row.tybh == 2"></span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="温度" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.wdregtype == 3">3x</span> <span v-else-if="scope.row.wdregtype == 4">4x</span>{{scope.row.wdloc}}
          <span v-if="scope.row.wddatatype == 2">U2</span><span v-else-if="scope.row.wddatatype == 3">I2</span>
          <span v-else-if="scope.row.wddatatype == 4">U4</span><span v-else-if="scope.row.wddatatype == 5">I4</span>
          <span v-else-if="scope.row.wddatatype == 8">F4</span>-><span v-if="scope.row.wdbh == 1">0.01d</span>
          <span v-else-if="scope.row.wdbh == 2"></span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="含水" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.hsregtype == 3">3x</span> <span v-else-if="scope.row.hsregtype == 4">4x</span>{{scope.row.hsloc}}
          <span v-if="scope.row.hsdatatype == 2">U2</span><span v-else-if="scope.row.hsdatatype == 3">I2</span>
          <span v-else-if="scope.row.hsdatatype == 4">U4</span><span v-else-if="scope.row.hsdatatype == 5">I4</span>
          <span v-else-if="scope.row.hsdatatype == 8">F4</span>-><span v-if="scope.row.hsbh == 1">0.01d</span>
          <span v-else-if="scope.row.hsbh == 2"></span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="加药罐液位" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.jygywregtype == 3">3x</span> <span v-else-if="scope.row.jygywregtype == 4">4x</span>{{scope.row.jygywloc}}
          <span v-if="scope.row.jygywdatatype == 2">U2</span><span v-else-if="scope.row.jygywdatatype == 3">I2</span>
          <span v-else-if="scope.row.jygywdatatype == 4">U4</span><span v-else-if="scope.row.jygywdatatype == 5">I4</span>
          <span v-else-if="scope.row.jygywdatatype == 8">F4</span>-><span v-if="scope.row.jygywbh == 1">0.01d</span>
          <span v-else-if="scope.row.jygywbh == 2"></span>
        </template>
      </el-table-column>
      <el-table-column prop="#" label="操作">
        <template slot-scope="scope">

          <el-button size="small" type="primary" @click="showEditForm(scope.row)">编辑 <i
              class="el-icon-edit"></i></el-button>
          <!--              <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>-->

          <el-popconfirm
              style="margin: 0 10px"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="handleDel(scope.row.id)"
          >
            <el-button size="small" type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i>
            </el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="padding: 5px">
      <el-pagination

          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100,500,1000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>

</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";


export default {
  created() {
    this.load();
  },
  data() {
    return {
      dwoptions: [],
      dwid: null,
      dwval: [],
      jh: '',
      gx: null,
      gxArr: [],
      tableData: [],
      selectedRows: [], // 用来存储选中行的数据
      pageSize: 10,
      total: 100,
      currentPage: 1,
      dialogFormVisible: false,
      editFormVisible: false,
      form: {
        jh: '',
        ip: '',
        dw: '',
        gx: null,

        cyjqdloc: null,
        cyjqdflag: null,
        cyjtjloc: 7,
        cyjtjflag: 1,

        hyregtype: 4,
        hyloc: 54,
        hydatatype: 2,
        hybh: 1,

        tyregtype: 4,
        tyloc: 54,
        tydatatype: 2,
        tybh: 1,

        wdregtype: 4,
        wdloc: 54,
        wddatatype: 2,
        wdbh: 1,

        hsregtype: 4,
        hsloc: 54,
        hsdatatype: 2,
        hsbh: 1,

        jygywregtype: 4,
        jygywloc: 54,
        jygywdatatype: 2,
        jygywbh: 1,

        mathdatatypes: [  //数值型的数据类型，统一使用。
          {id: 2, name: '16位无符号整数'},
          {id: 3, name: '16位整数'},
          {id: 4, name: '32位无符号整数'},
          {id: 5, name: '32位整数'},
          {id: 8, name: '32位float'}],
        bhs: [  //数据变化类型，统一使用。
          {id: 1, name: '0.01d'},
          {id: 2, name: '无变换'},
          {id: 3, name: '含水率'}
        ]
      },
      formRules: {
        jh: [
          {required: true, message: '请输入井号', trigger: 'blur'},
        ],
        ip: [
          {required: true, message: '请输入IP', trigger: 'blur'},
        ],
        dw: [
          {required: true, message: '请选择单位', trigger: 'blur'},
        ],
        // gx: [
        //   {required: true, message: '请选择干线', trigger: 'blur'},
        // ]
      },

      editform: {
        jh: '',
        ip: '',
        dw: '',
        gx: null,
        hyregtype: null,
        hyloc: null,
        hydatatype: null,
        hybh: null,
        tyregtype: null,
        tyloc: null,
        tydatatype: null,
        tybh: null,
        wdregtype: null,
        wdloc: null,
        wddatatype: null,
        wdbh: null,
        hsregtype: null,
        hsloc: null,
        hsdatatype: null,
        hsbh: null,
        jygywregtype: null,
        jygywloc: null,
        jygywdatatype: null,
        jygywbh: null,
        mathdatatypes: [  //数值型的数据类型，统一使用。
          {id: 2, name: '16位无符号整数'},
          {id: 3, name: '16位整数'},
          {id: 4, name: '32位无符号整数'},
          {id: 5, name: '32位整数'},
          {id: 8, name: '32位float'}],
        bhs: [  //数据变化类型，统一使用。
          {id: 1, name: '0.01d'},
          {id: 2, name: '无变换'},
          {id: 3, name: '含水率'}
        ]
      },
      editFormRules: {
        jh: [
          {required: true, message: '请输入井号', trigger: 'blur'},
        ],
        ip: [
          {required: true, message: '请输入IP', trigger: 'blur'},
        ],
        dw: [
          {required: true, message: '请选择单位', trigger: 'blur'},
        ],
        gx: [
          {required: true, message: '请选择干线', trigger: 'blur'},
        ]
      },

      formLabelWidth: '150px'
    }
  },
  methods: {
    stopcj(){
      service.get('/yjss/stopcj', {}).then(
          response => {
            if (response.data.code == 20000) {
              this.$message.success(response.data.message)
            }
          }
      )
    },
    startcj(){
      service.get('/yjss/startcj', {}).then(
          response => {
            if (response.data.code == 20000) {
              this.$message.success(response.data.message)
            }else{
              this.$message.error(response.data.message)
            }
          }
      )
    },
    test() {
      service.get('/dj/test', {}).then(
          response => {
            if (response.data.code == 20000) {

              this.$message.success(response.data.message)
            }
          }
      )

    },

    load() {
      service.get('/dw/getAll', {}).then(
          response => {
            if (response.data.code == 20000) {
              this.dwoptions = response.data.data
            }
          }
      )

      service.get('/yjxx/getpageBydwgxjh', {
        params: {
          pagesize: this.pageSize,
          pagenum: this.currentPage,
          jh: this.jh,
          dw: this.dwid,  //因为是拷贝的tj。vue，所以这个参数是多余的，置为空
          gx: null //因为是拷贝的tj。vue，所以这个参数是多余的，置为空
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data.records;
              this.total = response.data.data.total;
              this.currentPage = response.data.data.current;
              this.pageSize = response.data.data.size;
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );

    },
    //一个函数同时给新建和编辑框用，所以代码含有2者的东西
    dwchange(dw) {
      console.log('dwchange:' + dw)
      this.form.gx = null;//新建框
      this.editform.gx = null;//编辑框
      if (dw.length > 0) {
        let dwTmp = dw[dw.length - 1]
        // if (dw.length > 1) {
        //   dwTmp = dw[1]
        // }
        // service.get('/gx/getlistbydw', {params: {dwid: dw[dw.length - 1]}}).then(
        service.get('/gx/getlistbydw1', {params: {dwid: dwTmp}}).then(
            response => {
              if (response.data.code == 20000) {
                this.gxArr = response.data.data;
              } else {
                this.$message.error(response.data.message)
              }
            }, error => {
              ElementUI.Message({
                message: error.message,
                type: 'error'
              })
            }
        )
      } else {
        this.gxArr = []
      }
    },

    // gxchange(gxval) {
    //   this.load()
    // },
    handleSelectionChange(selection) {
      // console.log(selection)
      // this.selectedRows = selection.map(row => row._row);
      this.selectedRows = selection
      // console.log(this.selectedRows)
    },

    showNewForm() {
      service.get('/role/getlist', {
        params: {}
      }).then(response => {
            this.roles = response.data
            this.form =  {
              jh: '',
              ip: '',
              dw: '',
              gx: null,

              cyjqdloc: null,
              cyjqdflag: null,
              cyjtjloc: 7,
              cyjtjflag: 1,

              hyregtype: 4,
              hyloc: 54,
              hydatatype: 2,
              hybh: 1,

              tyregtype: 4,
              tyloc: 54,
              tydatatype: 2,
              tybh: 1,

              wdregtype: 4,
              wdloc: 54,
              wddatatype: 2,
              wdbh: 1,

              hsregtype: 4,
              hsloc: 54,
              hsdatatype: 2,
              hsbh: 1,

              jygywregtype: 4,
              jygywloc: 54,
              jygywdatatype: 2,
              jygywbh: 1,

              mathdatatypes: [  //数值型的数据类型，统一使用。
                {id: 2, name: '16位无符号整数'},
                {id: 3, name: '16位整数'},
                {id: 4, name: '32位无符号整数'},
                {id: 5, name: '32位整数'},
                {id: 8, name: '32位float'}],
              bhs: [  //数据变化类型，统一使用。
                {id: 1, name: '0.01d'},
                {id: 2, name: '无变换'},
                    {id: 3, name: '含水率'}
              ]
            }
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs["saveform"].clearValidate()
            })
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },

    handleSave() {
      console.log(this.form)
      this.$refs.saveform.validate(valid => {
        if (!valid) {
          return false
        }
        let saveform = {...this.form}
        saveform.dw = this.form.dw == null ? null : this.form.dw[this.form.dw.length - 1]
        service.post('/yjxx/save', saveform).then(response => {
          if (response.data.code == 20000) {
            this.$message.success('success!');
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error("error")
            this.dialogFormVisible = false
          }
        })
      })

    },

    showEditForm(row) {
      this.editform = {...row}
      this.$set(this.editform, 'mathdatatypes', [  //数值型的数据类型，统一使用。
        {id: 2, name: '16位无符号整数'},
        {id: 3, name: '16位整数'},
        {id: 4, name: '32位无符号整数'},
        {id: 5, name: '32位整数'},
        {id: 8, name: '32位float'}])
      this.$set(this.editform, 'bhs', [  //数据变化类型，统一使用。
        {id: 1, name: '0.01d'},
        {id: 2, name: '无变换'},
        {id: 3, name: '含水率'}
      ])
      console.log(this.editform)
      // let dwTmp = this.editform.dw == null ? null : this.editform.dw[this.editform.dw.length - 1]
      service.get('/gx/getlistbydw1', {
        params: {
          dwid: this.editform.dw
        }
      }).then(
        response3 => {
          if (response3.data.code == 20000) {
            this.gxArr = response3.data.data
            this.editFormVisible = true
            this.$nextTick(() => {
              this.$refs["editform"].clearValidate()
            })

          } else {
            this.$message.error(response3.data.message)
            // throw new Error(response3.data.message)
          }
        }
      )
    },

    handleEdit() {
      this.$refs.editform.validate(valid => {
        if (!valid) {
          return
        }
        let editformTmp = {...this.editform}

        if( this.editform.dw instanceof Array){
          editformTmp.dw = this.editform.dw[this.editform.dw.length - 1]
        }else {
          editformTmp.dw = this.editform.dw
        }
        // if(typeof 12 == "number"){
        //   console.log('number')
        // }else {
        //   console.log('haha number')
        // }


        console.log(this.editform.dw)
        console.log(editformTmp.dw)

        service.post('/yjxx/edit', editformTmp).then(response => {
          if (response.data.code == 20000) {
            this.$message.success('success!');
            this.editFormVisible = false
            this.load()
          } else {
            this.$message.error("error")
            this.editdialogFormVisible = false
          }
        })
      })

    },
    handleDel(id) {
      service.delete('/yjxx?id=' + id).then(response => {
        this.$message.success('删除成功!');
        this.load()
      })
    },
    search() {
      // this.currentPage = 1
      this.load()
    },
    handleDelBatch() {
      service.post('/yjxx/delbatch', this.selectedRows).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('删除成功!');
          this.load()
        } else {
          this.$message.error("error")
        }
      })
    },
    uploadFile(param) {
      //param中的file才是真正的文件体，用于传入axios上传方法的参数

      const header = {"content-type": "multipart/form-data"} //请求头设置，没必要加，axios看到formdata类型，会自动加上，
      let formData = new FormData();
      formData.append("file", param.file);
      service.post('/yjxx/import', formData).then(res => {
        if (res.data.code == 20000) {
          this.$message.success('导入成功!');
          this.load()
        } else {
          this.$alert(res.data.message, '导入错误！', {
            confirmButtonText: '确定',
          })
          this.load()
        }
      }, error => {
        this.$alert(error.message, '错误！', {
          confirmButtonText: '确定',
        })
      })
    },
    // batchImport() {
    //   this.$refs.upload.submit()
    // },
  }
}
</script>

<style scoped>

</style>
